<style>
    .avatars{
        width: 60px;
        border-radius: 50%;
        height: 60px;
    }
    .flex{
        display: flex;
    }
    .bar{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #avatarHr{
        width:50px;
        height:2px;
        background-color:#d9d9d9;
        margin-top:30px;
    }

    #tableWrap{
        border: 1px solid #333;
        /*overflow: hidden;*/
        /*height: 85vh;*/
    }
    #tableWrap > thead > tr > th{
        border: 1px solid #333;
    }
    #tableWrap > tbody > tr > td{
        border: 1px solid #333;
    }
    .css{
        width: 80px;
        margin-right: 20px;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">


    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('申请人')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-admin_name" class="form-control" data-rule="required" name="row[admin_name]" type="text" value="">
        </div>
    </div>


    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('申请时间')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-time" class="form-control datetimepicker"  data-rule="required"  name="row[time]" type="text" value="" autocomplete="off" data-date-use-current="false" data-date-format="YYYY-MM-DD">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('所属部门')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-group" data-rule="required" class="form-control selectpicker" name="row[group]">
                {foreach $group_arr as $index=>$vo}
                <option data-type="type" value="{$vo.id}"  >{$vo.name}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-3"><span style="color: red;font-size: 15px">*</span>{:__('申请人是否为购买人')}:</label>
        <div class="col-xs-12 col-sm-7">
            <div class="radio">
                <label for="row[buy]-是">
                    <input id="row[buy]-是" checked="checked" name="row[buy]" type="radio" value="是"> 是</label>
                <label for="row[buy]-否">
                    <input id="row[buy]-否" name="row[buy]" type="radio" value="否"> 否</label>
                亲属姓名:<input id="c-names" name="row[names]" type="text" value="" class="css">
                关系:<input id="c-relation" name="row[relation]" type="text" value="" class="css">
            </div>

            <!--<input id="c-type" class="form-control" data-rule="required" name="row[type]" type="text" value="">-->
        </div>
    </div>



    <!--<div id="wuping">-->

        <table id="tableWrap" style="border: none;" class="table table-striped">
            <thead>
            <tr>
                <th width="8%">序号</th>
                <th width="23%">会员服务</th>
                <th width="23%">数量</th>
                <th width="23%">单价（元）</th>
                <th width="23%">总价（元）</th>
            </tr>
            </thead>
            <tbody>

            <tr>
                <td>1</td>
                <td>
                    <select id="c-serve" onchange="inputNums('c-serve','money','count','total')" data-rule="required" class="form-control selectpicker" name="row[vip_id][]">
                        <option   data-type="type" value="0"></option>
                        {foreach $vip as $index=>$vo}
                        <option   data-type="type" value="{$vo.id}-{$vo.price}">{$vo.name}</option>
                        {/foreach}
                    </select>
                </td>
                <td>
                    <input id="count" type="text" oninput="checcount('count','money','total')" name="row[count][]" value="" class="form-control" data-tip="">
                </td>
                <td>
                    <input id="money" type="text" name="row[money][]" readonly="readonly" value="" class="form-control" data-tip="">
                </td>
                <td>
                    <input id="total" type="text" name="row[total][]" readonly="readonly" value="0" class="form-control" data-tip="">
                </td>

            </tr>

            </tbody>

        </table>


    <!--</div>-->

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <!--<input id="c-amount" class="form-control" readonly="readonly" data-rule="required" name="row[amount]" type="text" value="0">-->
            <input class="btn btn-sm btn-success btn-append" type="button" id="new" value="增加" />
        </div>
    </div>


    <div style="border-top: 1px solid #93a1a1; padding-top: 10px; margin-right: 20px;box-sizing: border-box">
        <!--<h3 class="title" style="color: red;padding-left:20px">评论:</h3>-->
    </div>

    <div class="form-group">
        <label for="c-ids" class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('抄送人')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-ids" data-rule="required" data-live-search="true" multiple class="form-control selectpicker" name="row[ids][]">
                {foreach $arr as $index=>$vo}
                <option value="{$vo.id}">{$vo.nickname}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('审批人')}:</label>
        <div class="col-xs-12 col-sm-8 flex">
            {foreach $examine as $index=>$vo}
            <div class="bar">
                <img class="avatars" src="{$vo.avatar}">
                <h4 class="title nickname">{$vo.nickname}</h4>
            </div>
            {if condition="$index < $count-1"}
            <div id="avatarHr"></div>
            {/if}
            <input type="hidden" name="row[id][]" value="{$vo.id}">
            {/foreach}
        </div>
    </div>




    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script src="/assets/img/jquery-3.4.1.min.js"></script>
<script>
    let x = 1;
    $("#new").off("click").on("click",function(){
        //$('#new').click(function(){
        x=x+1;
        //console.log(x);
         let html = `<tr>
                <td>`+x+`</td>
                <td>
                    <select id="c-serve-`+x+`" onchange="inputNums('c-serve-`+x+`','money-`+x+`','count-`+x+`','total-`+x+`')" data-rule="required" class="form-control selectpicker" name="row[vip_id][]">
                        <option   data-type="type" value="0"></option>
                        {foreach $vip as $index=>$vo}
                        <option   data-type="type" value="{$vo.id}-{$vo.price}">{$vo.name}</option>
                        {/foreach}
                    </select>
                </td>
                <td>
                    <input id="count-`+x+`" type="text" oninput="checcount('count-`+x+`','money-`+x+`','total-`+x+`')" name="row[count][]" value="" class="form-control" data-tip="">
                </td>
                <td>
                    <input id="money-`+x+`" type="text" name="row[money][]" readonly="readonly" value="" class="form-control" data-tip="">
                </td>
                <td>
                    <input id="total-`+x+`" type="text" name="row[total][]" readonly="readonly" value="0" class="form-control" data-tip="">
                </td>

                <td style="border: none;">
                    <input class="btn btn-sm btn-danger btn-remove" type="button" onclick="news23(this)" id="news" value="删除" />
                </td>
            </tr>`;
         $("#tableWrap").append(html)
    });
    function news23(that){
         $(that).parents("tr").remove();//指定div元素
        //$(that).remove();//指定tr元素
    }

    function inputNums(name1,name2,c1,c2) {
        let name3 = '#'+name1;
        let name4 = '#'+name2;
        let name5 = '#'+c1;
        let name6 = '#'+c2;

        let money = $(name3).val();

        let suffix = money.substr(money.lastIndexOf("-")+1);
        //console.log(suffix);
        let total = parseFloat(suffix)*1;
        $(name4).val(suffix);
        $(name5).val(1);
        $(name6).val(total);
    }

    function checcount(name1,name2,name3) {
        let name4 = '#'+name1;
        let name5 = '#'+name2;
        let name6 = '#'+name3;

        let count_val = $(name4).val();
        let money_val = $(name5).val();
        //let total_val = $(name4).val();
        let total = parseFloat(money_val)*Number(count_val);
        //console.log(count_val);
        $(name6).val(total);
    }

</script>